#{extends 'main.html' /}
#{set title:'TopTen' /}

<div class="series_tab">

<div class="series_title">Top 10</div>

<div class="series_follow">
	<img src="@{'/public/images/facebookShareIcon.png'}" width="14" height="14" border="0" style="vertical-align:middle;" />
	<a href="#"  onclick="FacebookInviteFriends();">Invite Your Friends!</a>
</div>

</div>
<div class="clear" style="height:20px"></div>


<div style="float: left; position: relative; width: 320px; border: 1px solid #59983B; border-radius: 5px; margin-left: 20px;">

<div class="clear" style="height:10px"></div>

<div class="left-row"><strong><u>TV Series</u></strong></div>
<div class="right-row"><strong><u>Rate</u></strong></div>

<div class="clear" style="height:10px"></div>


#{list items:rateList, as:'serie'}

<div class="">
<div class="left-row"><a href="/s/${serie.id}">${serie.name}</a></div>
<div class="right-row">${serie.avgRate}</div>
</div>
#{/list}

<div class="clear" style="height:10px"></div>

</div>


<div style="float: right; position: relative; width: 320px; border: 1px solid #59983B; border-radius: 5px; margin-right: 20px;">

<div class="clear" style="height:10px"></div>

<div>
<div class="left-row"><strong><u>TV Series</u></strong></div>
<div class="right-row"><strong><u>Following</u></strong></div> 
</div>

<div class="clear" style="height:10px"></div>

#{list items:followersList, as:'serie'}
<div>
<div class="left-row"><a href="/s/${serie.id}">${serie.name}</a></div>
<div class="right-row">${serie.numOfFollowers}</div> 
</div>
#{/list}
<div class="clear" style="height:10px"></div>

</div>

<div class="clear" style="height:20px"></div>
